<template>
  <el-col :span="activeData._config_.span" :offset="activeData.offset">
    <div :class="className" @click.stop="activeFormItemFun">
      <span class="drawing-item-delete" @click.stop="deleteItem(activeData)" title="删除">
        <el-icon><Delete /></el-icon>
      </span>
      <span class="drawing-item-copy" @click.stop="copyItem(activeData, drawingList)" title="复制">
        <el-icon><CopyDocument /></el-icon>
      </span>
      <el-form-item
        v-if="activeData._config_.layout == 'StandaloneItem'"
        :label-width="labelWidth"
        :label="label"
        :required="activeData._config_.required"
      >
        <DraggableStandaloneItem
          :active-data="activeData"
          :drawing-list="drawingList"
          :index="index"
          :active-id="activeId"
          :form-conf="formConf"
        />
      </el-form-item>
      <el-row v-else-if="activeData._config_.layout == 'ContainerItem'" :gutter="activeData._config_.gutter"> </el-row>
    </div>
  </el-col>
</template>
<script setup lang="ts" name="DraggableItem">
import { computed, inject, provide } from "vue";
import DraggableStandaloneItem from "../DraggableComponents/DraggableStandaloneItem.vue";
import { Delete, CopyDocument } from "@element-plus/icons-vue";
const props = defineProps({
  activeData: {
    type: Object,
    default: () => {
      {
      }
    }
  },
  index: Number,
  drawingList: {
    type: Array,
    default: () => []
  },
  activeId: Number,
  formConf: {
    type: Object,
    default: null
  }
});

const copyItem = inject("copyItem") as Function;
const deleteItem = inject("deleteItem") as Function;
const activeFormItem = inject("activeFormItem") as Function;
provide("activeFormItem", activeFormItem);

const activeFormItemFun = () => {
  activeFormItem(props.activeData);
};

let className = computed(() => {
  const config = props.activeData._config_;
  if (config.layout === "StandaloneItem") {
    return props.activeId === config.renderKey ? "drawing-item active-from-item" : "drawing-item";
  } else if (config.layout === "ContainerItem") {
    return props.activeId === config.renderKey ? "drawing-row-item active-from-item" : "drawing-row-item";
  }
  return "";
});
let labelWidth = computed(() => {
  const config = props.activeData._config_;
  let width = "" as null | String;
  if (config.layout === "StandaloneItem") {
    width = config.labelWidth ? `${config.labelWidth}px` : null;
    if (config.showLabel === false) width = "0";
  }
  return width;
});
let label = computed(() => {
  const config = props.activeData._config_;
  return config.showLabel ? config.label : "";
});
</script>
<style lang="scss">
@import "../styles/index";
@import "../styles/home";
</style>
